<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="requestParameters" ref="requestParameters">
          <div class="filter-container">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="标签名称：" prop="tagName">
                  <el-input
                    @keyup.enter="handleFilter"
                    style="width: 180px;"
                    placeholder="请输入"
                    class="filter-item"
                    v-model="requestParameters.tagName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="状态：" prop="state">
                  <el-select
                    class="filter-item"
                    style="width: 180px;"
                    v-model="requestParameters.state"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="" style="dispaly:inline">
                  <el-button size="small" @click="resetForm">清除</el-button>
                    <el-button size="small" type="primary" @click="handleFilter">搜索</el-button>
                  <el-button type="success" size="small" class="el-icon-edit" style="float:right" @click="openDialog()">新增标签</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="所属学科">
            <template slot-scope="scope">
              <span>{{scope.row.subjectName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="标签名称">
            <template slot-scope="scope">
              <span>{{scope.row.tagName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建者">
            <template slot-scope="scope">
              <span>{{scope.row.username}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建日期">
            <template slot-scope="scope">
              <span>{{scope.row.addDate}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
            <el-button  type="text" @click="handleStatus(scope.row)">
              <span v-if="scope.row.state==0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <el-button type="text" @click="openDialog(scope.row)" :disabled="scope.row.state === 0">修改</el-button>
            <el-button type="text" :disabled="scope.row.state === 0" @click="removeUser(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[10,20,30, 50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
          <!-- end -->
        <!-- 新增标签弹层 -->
        <tags-add ref="tagssAdd" :data="currTag" @updateList="updateList()"></tags-add>
      </el-card>
    </div>
  </div>
</template>
<script>
import { status } from '@/api/hmmm/constants'
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import TagsAdd from '../components/tags-add'
export default {
  name: 'Companystags',
  components: {
    TagsAdd
  },
  data () {
    return {
      currTag: {},
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      alertText: '',
      requestParameters: {
        tagName: null,
        state: null,
        page: 1,
        pagesize: 10
      }
    }
  },
  computed: {
    status () {
      return status
    }
  },
  methods: {
    // 初始数据
    initialDate () {
      // 读取数据
      this.getList()
    },
    // 获取列表数据
    async getList (params) {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      console.log(res.items)
      // 获取数据给dataList
      this.dataList = res.items
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 重置
    resetForm () {
      this.$refs.requestParameters.resetFields()
      // 读取数据
      this.getList()
    },
    // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 删除
    removeUser (user) {
      this.$confirm('此操作将永久删除标签 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.dataList.splice(user, 1)
              this.getList(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 启用、禁用
    handleStatus (val) {
      if (val.state) {
        val.state = 0
      } else {
        val.state = 1
      }
      var data = {
        id: val.id,
        state: val.state
      }
      this.yyState(data)
    },
    async yyState (data) {
      const { data: res } = await changeState(data)
      console.log(res)
    },
    // 编辑新增功能
    openDialog (tag = {}) {
      this.currTag = tag
      this.$nextTick(() => {
        this.$refs.tagssAdd.open()
      })
    },
    // 新增|修改 后更新列表
    updateList () {
      if (!this.currTag.id) {
        this.requestParameters.page = 1
      }
      this.getList()
    }
  },
  // 挂载结束
  mounted: function () {},
  // 创建完毕状态
  created () {
    var _this = this
    this.initialDate()
    // 键盘enter操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.requestParameters)
      }
    }
  },
  // 组件更新
  updated: function () {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin: 10px;
  float: right;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
